<template>
  <div class="infinite-list-wrapper">
    <ul
      class="list"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="disabled"
      infinite-scroll-immediate="false"
    >
      <li v-for="i in count" class="list-item" :key="i">{{ i }}</li>
    </ul>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 5,
      loading: false
    };
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  methods: {
    loadMore() {
      console.log('加载...');
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    }
  }
};
</script>
<style lang="scss">
.home {
  .infinite-list-wrapper {
    height: 200px; // 1. 指定高度
    overflow: auto; // 2. 内容超过指定高度 出现滚动条
    width: 500px;
    border: 1px solid green;
    margin-top: 120px;
    .list-item {
      background: lightblue;
      margin: 10px;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
